<template>
  <!--编辑-弹出层-->
  <el-form
    ref="editForm"
    :model="formFileds"
    label-width="120px"
    :rules="rules">
    <el-row>
      <el-col :span="12">
        <el-form-item label="反馈项目名" prop="peoId">
          <project-select v-model="formFileds.peoId"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="反馈截图" prop="screenshot">
          <upload-img v-model="formFileds.screenshot"></upload-img>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" v-model="formFileds.content"></el-input>
        </el-form-item>
      </el-col>


    </el-row>
    <el-row>

    </el-row>
    <el-form-item>
      <el-button type="primary" @click="handleEdit(formFileds.postGuid)">确定</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {insert,update,detail} from '@/api/feedBack'
import uploadImg from '@/views/components/uploadImg'
import projectSelect from '@/views/components/projectSelect'

export default {
  name: "feedBackEdit",
  components: {
    uploadImg,
    projectSelect
  },
  data() {
    return {
      formFileds: {
        peoId:null,//反馈项目id
        screenshot:null,//反馈截图
        content:null,//反馈内容
        id: null
      },
      rules: {
        peoId: [
          {required: true, message: '反馈项目id不能为空', trigger: 'blur, change'}
        ],
        screenshot: [
          {required: true, message: '反馈截图不能为空', trigger: 'blur, change'}
        ],
        content: [
          {required: true, message: '反馈内容不能为空', trigger: 'blur, change'}
        ],
        createTime: [
          {required: true, message: '反馈时间不能为空', trigger: 'blur, change'}
        ],
        createUser: [
          {required: true, message: '反馈发起者不能为空', trigger: 'blur, change'}
        ],

      },
    }
  },
  props:["editId"],
  mounted(){
    if (!this.editId){
      return;
    }

    this.getOne(this.editId);
  },
  methods: {
    handleEdit(id) {
      this.$refs.editForm.validate(isValid => {
        if (!isValid) return;
        if(this.editId){
          this.edit();
        }else{
          this.save();
        }
      });
    },
    close(){
      this.$emit("close");
    },
    getOne(id){
      let _this = this;
      detail(id).then(function (data) {
        if (data.code == 200){
          _this.formFileds = data.data;
        } else{
          _this.$message.error(data.message);
        }
      })
    },
    edit(){
      let _this = this;
      update(this.formFileds).then(function (data) {
        if (data.code == 200){
          _this.$message.success('编辑成功');
          _this.close();
        } else{
          _this.$message.error(data.message);
        }
      })
    },
    save(){
      let _this = this;
      insert(this.formFileds).then(function (data) {
        if (data.code == 200){
          _this.$message.success('新增成功');
          _this.close();
        } else{
          _this.$message.error(data.message);
        }
      })
    },
    reset(){
      this.$refs.editForm.resetFields();
    }
  }
}
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
.el-pagination{
  margin-top: 10px;
  float: left;
}
.tool_style{
  padding: 10px 0;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
